﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用Pagination插件实现数据分页显示</title>
<link rel="stylesheet" href="pagination/pagination.css"/>
<script type="text/javascript" src="pagination/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="pagination/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
	//通过AJAX加载分页元素
	var initPagination = function() {
		var num_entries = $("#hiddenresult div.result").length;
		// 创建分页
		$("#Pagination").pagination(num_entries, {
			num_edge_entries: 1, //边缘页数
			num_display_entries: 4, //连续分页主体部分显示的分页数
			callback: pageselectCallback,
			items_per_page: 1, //每页显示1项
			prev_text: "Prev",
			next_text: "Next"
		});
	 };
	function pageselectCallback(page_index, jq){
		var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
		$("#Searchresult").empty().append(new_content); //加载对应分页的内容
		return false;
	}
	//AJAX异步获取要加载的数据
	$("#hiddenresult").load("load.html", null, initPagination);
});
</script>
</head>

<body style="font-size:84%; color:#00F; line-height:1.4;">
<h1>使用Pagination插件实现数据分页显示</h1>
<div id="Pagination" class="pagination"></div>
<div id="Searchresult" style="width:300px; height:100px; padding:20px; background:#9CF"></div>
<div id="hiddenresult" style="display:none;">
</div>
</body>
</html>
